<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="我的绩效-定制化"
        data-page-identification="y_auhlddz3b2"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_rcfj0qms3u 自定义模板_05pakhlynd -->
            <a-modal
                title="项目月度绩效总分详情"
                v-model:visible="reasonState.visible"
                centered
                :body-style="{ padding: '15px 24px' }"
                width="700px"
                :footer="null"
            >
                <div class="detail-top-title">
                    <div class="detail-first">项目目标整体扣分：</div>
                    <div class="red-weight">{{ reasonState.totalDeductFraction }}</div>
                    <div class="detail-second">高层修正目标结果加减分：</div>
                    <div :class="['litter', Number(reasonState.correctFraction) < 0 ? 'red-weight' : 'green-font']">{{
                        reasonState.correctFraction
                    }}</div>
                </div>
                <div class="detail-item">当月计划完成未关联目标任务导致扣分</div>
                <div class="default-table" style="margin: 0">
                    <a-table
                        bordered
                        :pagination="false"
                        :columns="reasonState.columns"
                        :data-source="reasonState.isSelfData"
                        v-if="reasonState.isSelfData && reasonState.isSelfData.length > 0"
                    >
                        <template #bodyCell="{ column, record, text, index }">
                            <template v-if="column.dataIndex === 'taskPerformanceWeight'">
                                <!--                                <div v-if="record.taskPerformanceWeight > 0" class="green-font">+{{ record.taskPerformanceWeight }}</div>-->
                                <div class="red-font">-{{ record.taskPerformanceWeight }}</div>
                                <!--                                <div v-else class="red-font">{{ record.taskPerformanceWeight }}</div>-->
                            </template>
                        </template>
                    </a-table>
                </div>
                <div class="detail-item">他人未完成任务导致扣分</div>
                <div class="default-table" style="margin: 0">
                    <a-table
                        bordered
                        :pagination="false"
                        :columns="reasonState.columns"
                        :data-source="reasonState.otherData"
                        v-if="reasonState.otherData && reasonState.otherData.length > 0"
                    >
                        <template #bodyCell="{ column, record, text, index }">
                            <template v-if="column.dataIndex === 'taskPerformanceWeight'">
                                <!--                                <div v-if="record.taskPerformanceWeight > 0" class="green-font">+{{ record.taskPerformanceWeight }}</div>-->
                                <div class="red-font">-{{ record.taskPerformanceWeight }}</div>
                                <!--                                <div v-else class="red-font">{{ record.taskPerformanceWeight }}</div>-->
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-modal>
            <div class="jx-detail">
                <div class="detail-top">
                    <div class="detail-title">{{ ygState.dateStr }}绩效列表</div>
                    <div class="detail-title">
                        <a-date-picker
                            v-model:value="detailState.detailDate"
                            picker="month"
                            value-format="YYYY-MM"
                            style="width: 300px; margin-left: 10px"
                            @change="handlerChangeDate"
                            :allowClear="false"
                            :disabled-date="disabledDate"
                        />
                    </div>
                </div>
                <!--                    个人信息      -->
                <div :class="['detail-msg', { short: !isCurrentMonth() }]">
                    <div class="other">
                        <div class="other-top">
                            <div class="other-top-item">
                                <span class="people-name">{{ detailState.peopleDetail.userName }}</span>
                                <span class="department-title">{{ detailState.peopleDetail.departmentName }}</span>
                                <span class="title-tip" v-if="detailState.peopleDetail.templateProjectPm"
                                    >--模板项目项目经理</span
                                >
                                <span class="title-tip" v-if="detailState.peopleDetail.otherProjectPm"
                                    >--非模板项目项目经理</span
                                >
                            </div>
                        </div>
                        <div class="other-middle" v-if="isCurrentMonth()"
                            ><BellFilled style="color: #f7b500; margin-right: 8px" />
                            绩效成绩每日0点试算，不代表最终成绩，超过自然月后，由领导手动生成绩效成绩覆盖试运算成绩。</div
                        >
                        <div class="other-bottom">
                            <div class="other-bottom-item">
                                <span class="normal-font">最终绩效分数</span>
                                <span class="weight-font color-font">{{
                                    detailState.peopleDetail.finalPerformanceScore
                                }}</span>

                                <a-tooltip
                                    :overlay-style="{
                                        maxWidth: '500px'
                                    }"
                                >
                                    <template #title
                                        >通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分+日报、全勤最终绩效分数+月度修正得分；<br />

                                        如果用户为水泥配料模板项目项目经理，该用户的项目核算分（通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分）将乘以70%，剩余30%的项目绩效成绩将由业务专家和项目总监各自负责15%（最多15分，最少0分）的绩效打分；<br />

                                        如果用户为水泥配送、煤炭供应链项目经理或漳县试点项目经理，该用户的项目核算分（通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分）将乘以70%，剩余30%的项目绩效成绩将由项目总监负责30%（最多30分，最少0分）的绩效打分；
                                    </template>
                                    <ExclamationCircleOutlined style="margin-left: 4px; top: 8px" class="" />
                                </a-tooltip>
                            </div>
                            <!--               项目总监评分                       -->
                            <div
                                class="other-bottom-item"
                                v-if="
                                    detailState.peopleDetail.templateProjectPm ||
                                    detailState.peopleDetail.otherProjectPm
                                "
                            >
                                <span class="normal-font">项目总监评分</span>
                                <span class="weight-font" v-if="detailState.peopleDetail.projectDirectorFraction">{{
                                    detailState.peopleDetail.projectDirectorFraction
                                }}</span>
                                <span class="weight-font" style="font-size: 16px" v-else>待评分</span>
                                <span class="unit-font" v-if="detailState.peopleDetail.projectDirectorFraction"
                                    >分</span
                                >
                            </div>
                            <!--               项目总监评分                       -->
                            <!--               业务专家评分                       -->
                            <div class="other-bottom-item" v-if="detailState.peopleDetail.templateProjectPm">
                                <span class="normal-font">业务专家评分</span>
                                <span class="weight-font" v-if="detailState.peopleDetail.businessExpertFraction">{{
                                    detailState.peopleDetail.businessExpertFraction
                                }}</span>
                                <span class="weight-font" style="font-size: 16px" v-else>待评分</span>
                                <span class="unit-font" v-if="detailState.peopleDetail.businessExpertFraction">分</span>
                            </div>
                            <!--               业务专家评分                       -->
                            <!--                              本月参与项目-->
                            <div class="other-bottom-item">
                                <span class="normal-font">本月参加项目数</span>
                                <span class="weight-font">{{ detailState.peopleDetail.projectNum || 0 }}</span>
                                <span class="unit-font">个</span>
                            </div>

                            <!--                              本月参与项目-->
                            <!--                              本月参与目标-->
                            <div class="other-bottom-item">
                                <span class="normal-font">本月参加目标数</span>
                                <span class="weight-font">{{ detailState.peopleDetail.goalsNum || 0 }}</span>
                                <span class="unit-font">个</span>
                            </div>
                            <!--                              本月参与目标-->
                            <!--                              本月参与任务-->
                            <div class="other-bottom-item">
                                <span class="normal-font">本月参加任务数</span>
                                <span class="weight-font">{{ detailState.peopleDetail.taskNum || 0 }}</span>
                                <span class="unit-font">个</span>
                            </div>
                            <!--                              本月参与任务-->
                            <!--                              任务工时-->
                            <div class="other-bottom-item">
                                <span class="normal-font">任务工时</span>
                                <span class="weight-font">{{ detailState.peopleDetail.taskHourInput || 0 }}</span>
                                <span class="unit-font">天</span>
                                <span class="end-font">/{{ detailState.peopleDetail.currentMonthHourInput || 0 }}</span>
                                <span class="unit-font">天</span>
                            </div>
                            <!--                              任务工时-->
                            <!--                              其他日报工时-->
                            <div class="other-bottom-item">
                                <span class="normal-font">其他日报工时</span>
                                <span class="weight-font">{{ detailState.peopleDetail.otherDailyHourInput || 0 }}</span>
                                <span class="unit-font">天</span>
                                <span class="end-font">/{{ detailState.peopleDetail.currentMonthHourInput || 0 }}</span>
                                <span class="unit-font">天</span>
                            </div>
                            <!--                              其他日报工时-->
                        </div>
                    </div>
                </div>
                <!--                    个人信息      -->
                <!--                     平台、市场、交付-通用项目     -->
                <div class="default-div">
                    <!--                            标题-->
                    <div class="default-title">
                        <div class="default-title-img"></div>
                        <div class="title-type">平台、市场、交付-通用项目</div>
                        <div class="title-line"></div>
                        <div class="title-workHour">
                            <span class="title-normal-font">整体工时占比：</span>
                            <span class="title-weight-font">{{ detailState.defaultDetail.overallWorkHourRatio }}</span>
                            <a-tooltip :overlayStyle="overlayStyle">
                                <template #title>通用项目投入总工时/全部项目工时投入(已排除其他日报工时)</template>
                                <ExclamationCircleOutlined style="margin-left: 4px" />
                            </a-tooltip>
                        </div>
                        <div class="title-score">
                            <span class="title-normal-font">项目最终绩效总分数：</span>
                            <span class="title-weight-font">{{ detailState.defaultDetail.performanceScore }}分</span>
                        </div>
                        <div class="title-performance">
                            <span class="title-normal-font">最终绩效分数：</span>
                            <span class="title-weight-font blue-font"
                                >{{ detailState.defaultDetail.finalPerformanceScore }}分</span
                            >
                            <a-tooltip :overlayStyle="overlayStyle">
                                <template #title>整体工时占比*通用项目绩效分数</template>
                                <ExclamationCircleOutlined style="margin-left: 4px" />
                            </a-tooltip>
                        </div>
                    </div>
                    <!--                            标题-->
                    <!--                            内容-->
                    <div
                        class="default-content"
                        v-if="
                            detailState.defaultDetail.employeeMonthlyGoalsDtoList &&
                            detailState.defaultDetail.employeeMonthlyGoalsDtoList.length > 0
                        "
                    >
                        <div class="content-title">
                            <div class="title-normal-font">项目名称</div>
                            <div class="title-normal-font">角色</div>
                            <div class="title-normal-font"
                                >项目最终绩效分数
                                <a-tooltip :overlayStyle="overlayStyle">
                                    <template #title
                                        >团队负责人/负责人=项目月度绩效总分*通用项目下工时占比<br />
                                        执行人=（项目月度绩效总分*0.2+工时分*0.8）*通用项目下工时占比</template
                                    >
                                    <ExclamationCircleOutlined style="margin-left: 4px" />
                                </a-tooltip>
                            </div>
                            <div class="title-normal-font">项目月度绩效总分</div>
                            <div class="title-normal-font"
                                >工时占比分
                                <a-tooltip :overlayStyle="overlayStyle">
                                    <template #title>此项目下已完成任务工时/此项目投入任务工时</template>
                                    <ExclamationCircleOutlined style="margin-left: 4px" />
                                </a-tooltip>
                            </div>
                            <div class="title-normal-font">此项目投入任务总工时(h)</div>
                            <div class="title-normal-font"
                                >通用项目下工时占比
                                <a-tooltip>
                                    <template #title>此项目工时投入/全部项目工时投入(已排除其他日报工时)</template>
                                    <ExclamationCircleOutlined style="margin-left: 4px" />
                                </a-tooltip>
                            </div>
                        </div>
                        <a-collapse
                            v-model:activeKey="detailState.defaultDetail.activeKey"
                            :bordered="false"
                            expandIconPosition="right"
                        >
                            <template #expandIcon="{ isActive }">
                                <DownSquareOutlined v-if="!isActive" style="font-size: 16px; color: #595959" />
                                <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
                            </template>
                            <a-collapse-panel
                                v-for="(item, index) in detailState.defaultDetail.employeeMonthlyGoalsDtoList"
                                :key="index"
                            >
                                <template #header>
                                    <div class="collapse-title">
                                        <a-tooltip>
                                            <template #title>{{ item.projectName }} </template>
                                            <div class="collapse-weight-font">
                                                <span class="too-long">{{ item.projectName }}</span>
                                            </div>
                                        </a-tooltip>

                                        <div class="collapse-weight-font">{{ item.role }}</div>
                                        <div class="collapse-weight-font">{{ item.projectPerformanceScore }}</div>
                                        <div>
                                            <span
                                                :class="getClass(item.projectScore)"
                                                @click.stop="getScoreReason(item.id)"
                                                >{{ item.projectScore }}</span
                                            ></div
                                        >
                                        <div class="collapse-weight-font">{{ item.workHourScore }}</div>
                                        <div class="collapse-weight-font">{{ item.goalsHour }}</div>
                                        <div class="collapse-weight-font">{{ item.projectFractionRatio }}</div>
                                    </div>
                                </template>
                                <div class="default-table">
                                    <a-table
                                        :scroll="{ y: 200 }"
                                        bordered
                                        :columns="defaultColumns"
                                        :data-source="item.taskDtoList"
                                        :pagination="false"
                                    />
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                    <!--                            内容-->
                </div>
                <!--                     平台、市场、交付-通用项目     -->

                <!--                          交付模板项目-->
                <div class="template-div">
                    <!--                            标题-->
                    <div class="template-title">
                        <div class="template-title-img"></div>
                        <div class="title-type">交付-模版项目</div>
                        <div class="title-line"></div>
                        <div class="title-workHour">
                            <span class="title-normal-font">整体工时占比：</span>
                            <span class="title-weight-font">{{ detailState.templateDetail.overallWorkHourRatio }}</span>
                            <a-tooltip :overlayStyle="overlayStyle">
                                <template #title>交付模板项目投入总工时/全部项目工时投入(已排除其他日报工时)</template>
                                <ExclamationCircleOutlined style="margin-left: 4px" />
                            </a-tooltip>
                        </div>
                        <div class="title-score">
                            <span class="title-normal-font">模板项目最终绩效分数：</span>
                            <span class="title-weight-font">{{ detailState.templateDetail.performanceScore }}分</span>
                        </div>
                        <div class="title-performance">
                            <span class="title-normal-font">最终绩效分数：</span>
                            <span class="title-weight-font blue-font"
                                >{{ detailState.templateDetail.templateProjectFinalPerformance }}分</span
                            >
                            <a-tooltip :overlayStyle="overlayStyle">
                                <template #title>整体工时占比*模板项目绩效分数</template>
                                <ExclamationCircleOutlined style="margin-left: 4px" />
                            </a-tooltip>
                        </div>
                    </div>
                    <!--                            标题-->
                    <!--                            内容-->
                    <div
                        class="template-content"
                        v-if="
                            detailState.templateDetail.templateProjectPerformanceDtoList &&
                            detailState.templateDetail.templateProjectPerformanceDtoList.length > 0
                        "
                    >
                        <div class="template-content-title">
                            <div class="title-normal-font">项目名称</div>
                            <div class="title-normal-font">加减分</div>
                            <div class="title-normal-font">此项目投入任务总工时(h) </div>
                        </div>
                        <a-collapse
                            v-model:activeKey="detailState.templateDetail.activeKey"
                            :bordered="false"
                            expandIconPosition="right"
                        >
                            <template #expandIcon="{ isActive }">
                                <DownSquareOutlined v-if="!isActive" style="font-size: 16px; color: #595959" />
                                <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
                            </template>
                            <a-collapse-panel
                                v-for="(item, index) in detailState.templateDetail.templateProjectPerformanceDtoList"
                                :key="index"
                            >
                                <template #header>
                                    <div class="template-collapse-title">
                                        <a-tooltip>
                                            <template #title>{{ item.projectName }} </template>
                                            <div class="collapse-weight-font">
                                                <span class="template-too-long">{{ item.projectName }}</span>
                                            </div>
                                        </a-tooltip>

                                        <div v-if="item.scoreChange > 0" class="collapse-weight-font green-font"
                                            >+{{ item.scoreChange }}</div
                                        >
                                        <div v-else class="collapse-weight-font red-font">{{ item.scoreChange }}</div>
                                        <div class="collapse-weight-font">{{ item.projectInputHours }}</div>
                                    </div>
                                </template>
                                <div class="default-table">
                                    <a-table
                                        :pagination="false"
                                        bordered
                                        :columns="templateColumns"
                                        :data-source="item.taskDtoList"
                                        :scroll="{ y: 200 }"
                                    />
                                    <a-table
                                        v-if="false"
                                        :pagination="false"
                                        bordered
                                        :columns="noTemplateColumns"
                                        :data-source="item.taskDtoList"
                                        :scroll="{ y: 200 }"
                                    />
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                    <!--                            内容-->
                </div>
                <!--                          交付模板项目-->
                <!--                          无模板项目-->
                <div class="template-div">
                    <!--                            标题-->
                    <div class="template-title">
                        <div class="no-template-title-img">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="24px"
                                height="24px"
                                viewBox="0 0 24 24"
                                version="1.1"
                            >
                                <title>编组 46</title>
                                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g id="编组-46">
                                        <rect id="矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="24" height="24" />
                                        <g id="编组-45" transform="translate(0.5, 0)" fill-rule="nonzero">
                                            <path
                                                d="M0,4.57142858 C0,2.04669829 2.04669829,0 4.57142858,0 L18.2857143,0 C20.8104446,0 22.8571429,2.04669829 22.8571429,4.57142858 L22.8571429,19.4285714 C22.8571429,21.9533017 20.8104446,24 18.2857143,24 L4.57142858,24 C2.04669829,24 0,21.9533017 0,19.4285714 L0,4.57142858 Z"
                                                id="路径"
                                                fill="#366DEB"
                                            />
                                            <path
                                                d="M0,4.57142858 C0,2.04669829 2.04669829,0 4.57142858,0 L18.2857143,0 C20.8104446,0 22.8571429,2.04669829 22.8571429,4.57142858 L22.8571429,14.8571429 C22.8571429,17.3818731 20.8104446,19.4285714 18.2857143,19.4285714 L4.57142858,19.4285714 C2.0466983,19.4285714 0,17.3818731 0,14.8571429 L0,4.57142858 Z"
                                                id="路径"
                                                fill="#366DEB"
                                            />
                                            <path
                                                d="M0,5.93537141 C0,3.87204345 0.889198283,1.0671286 3,1.0671286 L8.85660016,1.0671286 C10.2223347,1.06659582 10.7459775,1.77876493 11.4285714,2.93507871 L18.270936,2.93507871 C20.8036688,2.93507871 22.8571429,6.07471983 22.8571429,8.55048921 L22.8571429,18.5840919 C22.8571429,21.0598614 20.8036687,23.0671286 18.270936,23.0671286 L4.58620688,23.0671286 C2.05347411,23.0671286 0,21.0598613 0,18.5840919 L0,5.93537141 Z"
                                                id="路径备份-8"
                                                fill="#6896FF"
                                                opacity="0.3"
                                            />
                                            <path
                                                d="M0,8.2715297 C0,6.48956581 0.889198283,4.06714091 3,4.06714091 L8.85660016,4.06714091 C10.2223347,4.06668078 10.7459775,4.68173552 11.4285714,5.68036951 L18.270936,5.68036951 C20.8036688,5.68036951 22.8571429,8.39187599 22.8571429,10.5300391 L22.8571429,19.1954176 C22.8571429,21.3335807 20.8036687,23.0671286 18.270936,23.0671286 L4.58620688,23.0671286 C2.05347411,23.0671286 0,21.3335807 0,19.1954176 L0,8.2715297 Z"
                                                id="路径备份-8"
                                                fill="#6896FF"
                                            />
                                            <g id="编组-3" transform="translate(3, 9)" fill="#FFFFFF">
                                                <path
                                                    d="M0,0.5 C0,0.367391766 0.0752548718,0.240214806 0.209209426,0.146446614 C0.343163981,0.0526784222 0.524845349,0 0.714285701,0 L9.28571425,0 C9.54090397,0 9.77670899,0.0952994524 9.90430385,0.249999994 C10.0318987,0.404700535 10.0318987,0.595299465 9.90430385,0.750000006 C9.77670899,0.904700548 9.54090397,1 9.28571425,1 L0.714285701,1 C0.319796601,1 0,0.77614238 0,0.5 L0,0.5 Z"
                                                    id="路径"
                                                />
                                                <path
                                                    d="M0,3.5 C0,3.22385763 0.317131631,3 0.708333322,3 L16.2916667,3 C16.6828684,3 17,3.22385763 17,3.5 C17,3.77614237 16.6828684,4 16.2916667,4 L0.708333322,4 C0.317131631,4 0,3.77614237 0,3.5 L0,3.5 Z"
                                                    id="路径"
                                                />
                                                <path
                                                    d="M0,6.5 C0,6.22385762 0.31713163,6 0.708333322,6 L16.2916667,6 C16.6828684,6 17,6.22385763 17,6.5 C17,6.77614237 16.6828684,7 16.2916667,7 L0.708333322,7 C0.520471639,7 0.340304282,6.94732158 0.207466015,6.85355339 C0.074627748,6.75978519 0,6.63260823 0,6.5 L0,6.5 Z"
                                                    id="路径"
                                                />
                                                <path
                                                    d="M0,9.5 C0,9.36739177 0.074627748,9.24021481 0.207466015,9.14644661 C0.340304282,9.05267842 0.520471639,9 0.708333322,9 L16.2916667,9 C16.6828684,9 17,9.22385763 17,9.5 C17,9.77614237 16.6828684,10 16.2916667,10 L0.708333322,10 C0.31713163,10 0,9.77614238 0,9.5 L0,9.5 Z"
                                                    id="路径"
                                                />
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="title-type">交付-无模板项目（漳县、水泥配送、煤炭供应链）</div>
                        <div class="title-line"></div>
                        <div class="title-workHour">
                            <span class="title-normal-font">整体工时占比：</span>
                            <span class="title-weight-font">{{
                                detailState.noTemplateDetail.overallWorkHourRatio
                            }}</span>
                            <a-tooltip :overlayStyle="overlayStyle">
                                <template #title
                                    >交付无模板推广项目投入总工时/全部项目工时投入(已排除其他日报工时)</template
                                >
                                <ExclamationCircleOutlined style="margin-left: 4px" />
                            </a-tooltip>
                        </div>
                        <div class="title-score">
                            <span class="title-normal-font">无模板项目最终绩效分数：</span>
                            <span class="title-weight-font">{{ detailState.noTemplateDetail.performanceScore }}分</span>
                        </div>
                        <div class="title-performance">
                            <span class="title-normal-font">最终绩效分数：</span>
                            <span class="title-weight-font blue-font"
                                >{{ detailState.noTemplateDetail.templateProjectFinalPerformance }}分</span
                            >
                            <a-tooltip :overlayStyle="overlayStyle">
                                <template #title>整体工时占比*模板项目绩效分数</template>
                                <ExclamationCircleOutlined style="margin-left: 4px" />
                            </a-tooltip>
                        </div>
                    </div>
                    <!--                            标题-->
                    <!--                            内容-->
                    <div
                        class="template-content"
                        v-if="
                            detailState.noTemplateDetail.ppmNoTemplatePerformanceDtoList &&
                            detailState.noTemplateDetail.ppmNoTemplatePerformanceDtoList.length > 0
                        "
                    >
                        <div class="template-content-title">
                            <div class="title-normal-font">项目名称</div>
                            <div class="title-normal-font">加减分</div>
                            <div class="title-normal-font">此项目投入任务总工时(h) </div>
                        </div>

                        <a-collapse
                            v-model:activeKey="detailState.noTemplateDetail.activeKey"
                            :bordered="false"
                            expandIconPosition="right"
                        >
                            <template #expandIcon="{ isActive }">
                                <DownSquareOutlined v-if="!isActive" style="font-size: 16px; color: #595959" />
                                <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
                            </template>
                            <a-collapse-panel
                                v-for="(item, index) in detailState.noTemplateDetail.ppmNoTemplatePerformanceDtoList"
                                :key="index"
                            >
                                <template #header>
                                    <div class="template-collapse-title">
                                        <a-tooltip>
                                            <template #title>{{ item.projectName }} </template>
                                            <div class="collapse-weight-font">
                                                <span class="template-too-long">{{ item.projectName }}</span>
                                            </div>
                                        </a-tooltip>

                                        <div v-if="item.scoreChange > 0" class="collapse-weight-font green-font"
                                            >+{{ item.scoreChange }}</div
                                        >
                                        <div v-else class="collapse-weight-font red-font">{{ item.scoreChange }}</div>
                                        <div class="collapse-weight-font">{{ item.projectInputHours }}</div>
                                    </div>
                                </template>
                                <div class="default-table">
                                    <a-table
                                        :pagination="false"
                                        bordered
                                        :columns="noTemplateColumns"
                                        :data-source="item.noTemplateMilepostList"
                                        :scroll="{ y: 200 }"
                                    />
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                    <!--                            内容-->
                </div>
                <!--                          无模板项目-->
                <!--                          行动项任务-->
                <div class="action-div">
                    <!--                            标题-->
                    <div class="action-title">
                        <div class="action-title-img"></div>
                        <div class="title-type">行动项任务</div>
                        <div class="title-line"></div>
                        <div class="title-workHour">
                            <span class="title-normal-font">整体工时占比：</span>
                            <span class="title-weight-font">{{ detailState.actionDetail.overallWorkHourRatio }}</span>
                            <a-tooltip :overlayStyle="overlayStyle">
                                <template #title>行动项任务投入总工时/全部项目工时投入(已排除其他日报工时)</template>
                                <ExclamationCircleOutlined style="margin-left: 4px" />
                            </a-tooltip>
                        </div>
                        <div class="title-score">
                            <span class="title-normal-font">行动项任务最终绩效分数：</span>
                            <span class="title-weight-font">{{ detailState.actionDetail.performanceScore }}分</span>
                        </div>
                        <div class="title-performance">
                            <span class="title-normal-font">最终绩效分数：</span>
                            <span class="title-weight-font blue-font"
                                >{{ detailState.actionDetail.actionTaskFinalPerformance }}分</span
                            >
                            <a-tooltip :overlayStyle="overlayStyle">
                                <template #title>整体工时占比*行动项绩效分数</template>
                                <ExclamationCircleOutlined style="margin-left: 4px" />
                            </a-tooltip>
                        </div>
                    </div>
                    <!--                            标题-->
                    <!--                            内容-->
                    <div
                        class="default-content"
                        v-if="
                            detailState.actionDetail.taskPerformanceDtoList &&
                            detailState.actionDetail.taskPerformanceDtoList.length > 0
                        "
                    >
                        <div class="default-table" style="margin: 0">
                            <a-table
                                :pagination="false"
                                bordered
                                :scroll="{ y: 200 }"
                                :columns="actionColumns"
                                :data-source="detailState.actionDetail.taskPerformanceDtoList"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <!--                       修正手动加减分               -->
                                    <template v-if="column.dataIndex === 'scoreChangeNum'">
                                        <div v-if="record.scoreChangeNum > 0" class="green-font"
                                            >+{{ record.scoreChangeNum }}</div
                                        >
                                        <div v-if="record.scoreChangeNum < 0" class="red-font">{{
                                            record.scoreChangeNum
                                        }}</div>
                                        <div v-if="record.scoreChangeNum === 0">+{{ record.scoreChangeNum }}</div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                    <!--                            内容-->
                </div>
                <!--                          行动项任务-->
                <!--                          日报、全勤奖-->
                <div class="record-div">
                    <!--                            标题-->
                    <div class="record-title">
                        <div class="record-title-img"></div>
                        <div class="title-type">日报、全勤加减分明细</div>
                        <div class="title-line"></div>
                        <div class="title-performance">
                            <span class="title-normal-font">最终绩效分数：</span>
                            <span class="title-weight-font blue-font"
                                >{{ detailState.recordDetail.finalPerformanceScore }}分</span
                            >
                        </div>
                    </div>
                    <!--                            标题-->
                    <!--                            内容-->
                    <div
                        class="default-content"
                        v-if="
                            detailState.recordDetail.dailyPointsDtoList &&
                            detailState.recordDetail.dailyPointsDtoList.length > 0
                        "
                    >
                        <div class="default-table" style="margin: 0">
                            <a-table
                                :scroll="{ y: 200 }"
                                bordered
                                :pagination="false"
                                :columns="recordColumns"
                                :data-source="detailState.recordDetail.dailyPointsDtoList"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'score'">
                                        <div v-if="record.score > 0" class="green-font">+{{ record.score }}</div>
                                        <div v-else class="red-font">{{ record.score }}</div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                    <!--                            内容-->
                </div>
                <!--                          日报、全勤奖-->
                <!--                          月度修正-->
                <div class="correct-div">
                    <!--                            标题-->
                    <div class="correct-title">
                        <div class="correct-title-img"></div>
                        <div class="title-type">月度修正得分：</div>
                        <span class="title-weight-font blue-font" style="margin-right: 12px"
                            >{{ detailState.peopleDetail.scoreChangesNum || 0 }}分</span
                        >
                        <div class="title-line"></div>
                        <div class="title-performance">
                            <span class="title-normal-font">原因：</span>
                            <span class="title-normal-font">{{ detailState.peopleDetail.scoreChangesDetails }}</span>
                        </div>
                    </div>
                    <!--                            标题-->
                </div>
                <!--                          月度修正-->
                <!--                          非目标项目-->
                <div class="record-div">
                    <!--                            标题-->
                    <div class="record-title">
                        <div class="no-title-img">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="23px"
                                height="23.76px"
                                viewBox="0 0 23 23.76"
                                version="1.1"
                            >
                                <title>非目标项目任务</title>
                                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g id="我的详情" transform="translate(-474.5, -1143)">
                                        <g id="非目标项目任务" transform="translate(474, 1143)">
                                            <rect id="矩形" x="0" y="0" width="24" height="24" />
                                            <g id="编组" transform="translate(0.5, 0)" fill-rule="nonzero">
                                                <path
                                                    d="M4.75862068,0.76 L18.2413793,0.76 C21.4137931,0.76 23,2.34620689 23,5.51862067 L23,19.0013793 C23,22.1737931 21.4137931,23.76 18.2413793,23.76 L4.75862068,23.76 C1.58620687,23.76 0,22.1737931 0,19.0013793 L0,5.51862067 C0,2.34620687 1.58620689,0.76 4.75862068,0.76 Z"
                                                    id="路径"
                                                    fill="#366DEB"
                                                />
                                                <path
                                                    d="M4.75862068,0 L18.2413793,0 C21.4137931,0 23,1.70399999 23,5.11199998 L23,17.892 C23,21.3 21.4137931,23.004 18.2413793,23.004 L4.75862068,23.004 C1.58620687,23.004 0,21.3 0,17.892 L0,5.11199998 C0,1.70399997 1.58620689,0 4.75862068,0 Z"
                                                    id="路径"
                                                    fill="#6896FF"
                                                />
                                                <g id="编组-44" transform="translate(2.16, 2.16)" fill="#FFFFFF">
                                                    <path
                                                        d="M16.2288,0 C17.9360226,0 19.32,1.43268879 19.32,3.19999998 L19.32,15.2 C19.32,16.9673112 17.9360226,18.4 16.2288,18.4 L3.0912,18.4 C1.38397738,18.4 0,16.9673112 0,15.2 L0,3.19999998 C0,1.43268879 1.38397739,0 3.0912,0 L16.2288,0 L16.2288,0 Z M16.2288,1.6 L3.0912,1.6 C2.2375887,1.6 1.5456,2.31634439 1.5456,3.19999998 L1.5456,15.2 C1.5456,16.0836556 2.23758869,16.8 3.0912,16.8 L16.2288,16.8 C17.0824113,16.8 17.7744,16.0836556 17.7744,15.2 L17.7744,3.19999998 C17.7744,2.31634439 17.0824113,1.6 16.2288,1.6 L16.2288,1.6 Z"
                                                        id="形状"
                                                    />
                                                    <path
                                                        d="M12.42,3.68 C14.1983569,3.68 15.64,5.0922218 15.64,6.83428569 L15.64,11.5657143 C15.64,13.3077782 14.1983569,14.72 12.42,14.72 L5.98,14.72 C4.20164311,14.72 2.76,13.3077782 2.76,11.5657143 L2.76,6.83428569 C2.76,5.0922218 4.20164312,3.68 5.98,3.68 L12.42,3.68 L12.42,3.68 Z M12.42,5.25714286 L5.98,5.25714286 C5.09082156,5.25714286 4.37,5.96325375 4.37,6.83428569 L4.37,11.5657143 C4.37,12.4367462 5.09082155,13.1428571 5.98,13.1428571 L12.42,13.1428571 C13.3091784,13.1428571 14.03,12.4367462 14.03,11.5657143 L14.03,6.83428569 C14.03,5.96325375 13.3091784,5.25714286 12.42,5.25714286 L12.42,5.25714286 Z"
                                                        id="形状"
                                                    />
                                                    <path
                                                        d="M8.09599999,8.28 L10.304,8.28 C10.7946667,8.28 11.04,8.51 11.04,8.96999999 L11.04,10.35 C11.04,10.81 10.7946667,11.04 10.304,11.04 L8.09599999,11.04 C7.60533333,11.04 7.36,10.81 7.36,10.35 L7.36,8.96999999 C7.36,8.51 7.60533333,8.28 8.09599999,8.28 Z"
                                                        id="路径"
                                                    />
                                                </g>
                                                <polygon
                                                    id="路径"
                                                    fill="#0A3E47"
                                                    opacity="0.2"
                                                    points="14.6589802 5.36 15.5761581 8.18086009 23 6.15973687 23 10.842266 16.9156456 12.5547549 17.5694915 15.48 11.04 11.6794006"
                                                />
                                                <polygon
                                                    id="路径"
                                                    fill="#1250DB"
                                                    points="11.04 11.96 11.04 4.90057044 13.1732361 6.81690578 19.9444764 3.06954462e-14 23 3.08203974 16.4115519 9.82777873 18.3738912 11.9596024"
                                                />
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="title-type">非目标项目任务</div>
                        <div class="title-line"></div>
                        <div class="title-performance">
                            工时:
                            <span class="title-weight-font blue-font">{{
                                reasonState.noTargetData.performanceScore
                            }}</span>
                        </div>
                    </div>
                    <!--                            标题-->
                    <!--                            内容-->
                    <div
                        class="default-content"
                        v-if="
                            reasonState.noTargetData.taskPerformanceDtoList &&
                            reasonState.noTargetData.taskPerformanceDtoList.length > 0
                        "
                    >
                        <div class="default-table" style="margin: 0">
                            <a-table
                                :scroll="{ y: 200 }"
                                bordered
                                :pagination="false"
                                :columns="reasonState.noTargetColumns"
                                :data-source="reasonState.noTargetData.taskPerformanceDtoList"
                            >
                                <template #bodyCell="{ column, record, text, index }">
                                    <template v-if="column.dataIndex === 'score'">
                                        <div v-if="record.score > 0" class="green-font">+{{ record.score }}</div>
                                        <div v-else class="red-font">{{ record.score }}</div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                    <!--                            内容-->
                </div>
                <!--                          非目标项目-->
            </div>
            <!-- end vid_rcfj0qms3u 自定义模板_05pakhlynd -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        // const lastMonth = dayjs().subtract(1, 'month')
        // ygState.dateStr = lastMonth.format('YYYY年MM月')
        detailState.detailDate = dayjs(new Date()).format('YYYY-MM')
        getPtDetail(null, null)
    })
    const ygState = reactive({
        expandedKeys: [],
        selectedKeys: [],
        checkedKeys: [],
        searchValue: '',
        dateStr: '',
        filter: {
            projectName: undefined,
            month: undefined
        },
        treeData: [],
        selected: {},
        projectNameList: [],
        tableData: [],
        selectedRowKeys: [],
        exportScoreVisible: false,
        addOrReduceVisible: false,
        fileList: [],
        staffType: 'DEPARTMENT'
    })
    const detailState = reactive({
        detailDate: '',
        dateStr: '',
        //   个人信息部分,
        peopleDetail: {
            userName: '',
            taskNum: '',
            projectNum: '',
            goalsNum: '',
            fraction: '',
            finalPerformanceScore: '',
            departmentName: '',
            goalsReportHourInput: '',
            otherDailyHourInput: ''
        },
        //   平台数据
        defaultDetail: {
            activeKey: [],
            dataSource: [],
            finalPerformanceScore: '',
            overallWorkHourRatio: '',
            performanceScore: ''
        },
        //     模板数据
        templateDetail: {
            activeKey: [],
            dataSource: []
        },
        // 日报全勤奖数据
        recordDetail: {
            dataSource: []
        },
        //     xdx人数据
        actionDetail: {
            dataSource: []
        },
        noTemplateDetail: {}
    })
    const defaultColumns = ref([
        {
            title: '项目阶段',
            dataIndex: 'projectMilepost',
            align: 'left',
            ellipsis: true,
            width: 205,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    rowSpan: rowSpan
                }
            }
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            width: 284,
            align: 'left',
            ellipsis: true,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    style: {
                        borderLeft: 'none'
                    }
                }
            }
        },
        { title: '任务负责人', dataIndex: 'taskOwner', width: 103, align: 'left', ellipsis: true },
        { title: '任务执行人', dataIndex: 'taskParticipants', width: 261, align: 'left', ellipsis: true },
        { title: '任务完成情况', dataIndex: 'taskStatus', width: 117, align: 'center', ellipsis: true },
        { title: '任务目标分数', dataIndex: 'taskFraction', width: 120, align: 'center', ellipsis: true },
        { title: '任务得分情况', dataIndex: 'taskScore', width: 120, align: 'center', ellipsis: true },
        { title: '投入工时(h)', dataIndex: 'taskHourInput', width: 120, align: 'center', ellipsis: true }
    ])
    const templateColumns = ref([
        {
            title: '项目阶段',
            dataIndex: 'projectMilepost',
            align: 'left',
            ellipsis: true,
            width: 205,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    rowSpan: rowSpan
                }
            }
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            width: 348,
            align: 'left',
            ellipsis: true,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    style: {
                        borderLeft: 'none'
                    }
                }
            }
        },
        { title: '任务完成情况', dataIndex: 'taskStatus', width: 225, align: 'center', ellipsis: true },
        { title: '绩效加减分', dataIndex: 'scoreChangeNum', width: 150, align: 'center', ellipsis: true },
        { title: '加减分原因', dataIndex: 'pointTypeName', width: 157, align: 'center', ellipsis: true },
        { title: '投入工时(h)', dataIndex: 'workHours', width: 200, align: 'center', ellipsis: true }
    ])
    const recordColumns = ref([
        { title: '工时对应时间', dataIndex: 'dailyDate', width: 300, align: 'center', ellipsis: true },
        { title: '触发时间', dataIndex: 'triggerTime', width: 300, align: 'center', ellipsis: true },
        { title: '触发分数', dataIndex: 'score', width: 300, align: 'center', ellipsis: true },
        { title: '原因', dataIndex: 'reason', width: 300, align: 'center', ellipsis: true }
    ])
    const actionColumns = ref([
        { title: '行动项任务名称', dataIndex: 'actionTaskName', width: 500, align: 'left', ellipsis: true },
        { title: '行动项任务完成情况', dataIndex: 'taskStatus', align: 'center', ellipsis: true },
        { title: '加减分', dataIndex: 'scoreChangeNum', align: 'center', ellipsis: true },
        { title: '加减分原因', dataIndex: 'pointTypeName', align: 'center', ellipsis: true },
        { title: '投入工时', dataIndex: 'workHours', align: 'center', ellipsis: true }
    ])

    // 获取平台、交付
    function getPtDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: detailState.detailDate
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/goals_list`, params).then(data => {
            if (data.code === 200) {
                data.data.employeeMonthlyGoalsDtoList = formatData(data.data.employeeMonthlyGoalsDtoList)
                detailState.defaultDetail = data.data
                getPeopleDetail(null, null)
            } else {
                message.error(data.message)
                detailState.defaultDetail = {}
            }
        })
    }
    // 个人信息
    function getPeopleDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: detailState.detailDate
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/performance`, params).then(data => {
            if (data.code === 200) {
                detailState.peopleDetail = data.data
                getTemplateDetail(null, null)
            } else {
                message.error(data.message)
                detailState.peopleDetail = {}
            }
        })
    }
    // 模板项目详情
    function getTemplateDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: detailState.detailDate
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/template_goals_list`, params).then(data => {
            if (data.code === 200) {
                data.data.templateProjectPerformanceDtoList.taskDtoList = formatData(
                    data.data.templateProjectPerformanceDtoList
                )
                detailState.templateDetail = data.data
                getActionDetail(null, null)
            } else {
                message.error(data.message)
                detailState.templateDetail = {}
            }
        })
    }
    function formatData(data) {
        return data.map(project => {
            project.taskDtoList = groupMilepostData(project.taskDtoList)
            return project
        })
    }
    // 行动项项目详情
    function getActionDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: detailState.detailDate
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/action_task_list`, params).then(data => {
            if (data.code === 200) {
                data.data.taskPerformanceDtoList = data.data.taskPerformanceDtoList
                detailState.actionDetail = data.data
                getRecordDetail(null, null)
            } else {
                message.error(data.message)
                detailState.actionDetail = {}
            }
        })
    }
    // 日报详情
    function getRecordDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: detailState.detailDate
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/daily_list', params).then(data => {
            if (data.code === 200) {
                detailState.recordDetail = data.data
                getNoTemplateDetail(null, null)
            } else {
                message.error(data.message)
                detailState.recordDetail = {}
            }
        })
    }
    // 无模板项目详情
    function getNoTemplateDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: detailState.detailDate
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/no_template_goals_list', params).then(data => {
            if (data.code === 200) {
                detailState.noTemplateDetail = data.data
                getNoTargetDetail(null, null)
            } else {
                detailState.noTemplateDetail = {}
            }
        })
    }
    // 非目标项目任务
    function getNoTargetDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: detailState.detailDate
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/problem_task_list', params).then(data => {
            if (data.code === 200) {
                reasonState.noTargetData = data.data
            } else {
                reasonState.noTargetData = {}
            }
        })
    }
    const noTemplateColumns = ref([
        {
            title: '项目阶段',
            dataIndex: 'milepostName',
            align: 'left',
            ellipsis: true,
            width: 205,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    rowSpan: rowSpan
                }
            }
        },
        { title: '项目阶段完成情况', dataIndex: 'milepostStatus', width: 225, align: 'center', ellipsis: true },
        { title: '绩效加减分', dataIndex: 'scoreChangeNum', width: 150, align: 'center', ellipsis: true },
        { title: '加减分原因', dataIndex: 'pointTypeName', width: 157, align: 'center', ellipsis: true },
        { title: '投入工时(h)', dataIndex: 'workHours', width: 200, align: 'center', ellipsis: true }
    ])
    // 格式化
    function groupData(data) {
        let currentProjectName = ''
        return data.map((item, index) => {
            if (currentProjectName !== item.projectName) {
                currentProjectName = item.projectName
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (currentProjectName === data[i].projectName) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
            } else {
                item.rowSpan = 0
            }
            return item
        })
    }
    // 格式化
    function groupMilepostData(data) {
        let currentProjectMilepost = ''
        return data.map((item, index) => {
            if (currentProjectMilepost !== item.projectMilepost) {
                currentProjectMilepost = item.projectMilepost
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (currentProjectMilepost === data[i].projectMilepost) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
            } else {
                item.rowSpan = 0
            }
            return item
        })
    }
    watch(
        () => detailState.detailDate,
        () => {
            if (detailState.detailDate) {
                const formattedDate = dayjs(detailState.detailDate, 'YYYY-MM').format('YYYY年MM月')
                ygState.dateStr = formattedDate
            }
        },
        { deep: true }
    )
    function handlerChangeDate(date) {
        getPtDetail(null, null)
    }
    const disabledDate = current => {
        // 获取当前日期的年月
        const currentYearMonth = dayjs(current).format('YYYY-MM')
        // 获取今天的年月
        const todayYearMonth = dayjs().format('YYYY-MM')
        // 禁用当月及以后的月份
        return currentYearMonth > todayYearMonth
    }
    const reasonState = reactive({
        visible: false,
        totalDeductFraction: '',
        correctFraction: '',
        columns: [
            {
                title: '项目阶段',
                dataIndex: 'milepostName',
                align: 'left',
                ellipsis: true,
                width: 205
            },
            {
                title: '任务名称',
                dataIndex: 'taskName',
                width: 348,
                align: 'left',
                ellipsis: true
            },
            {
                title: '加减分',
                dataIndex: 'taskPerformanceWeight',
                align: 'center',
                ellipsis: true
            }
        ],
        isSelfData: [],
        otherData: [],
        noTargetColumns: [
            {
                title: '项目名称',
                dataIndex: 'projectName',
                align: 'left',
                ellipsis: true,
                width: 205
            },
            {
                title: '项目阶段名称',
                dataIndex: 'milepostName',
                align: 'left',
                ellipsis: true,
                width: 205
            },
            {
                title: '任务名称',
                dataIndex: 'taskName',
                width: 348,
                align: 'left',
                ellipsis: true
            },
            {
                title: '项目经理',
                dataIndex: 'pmName',
                align: 'left',
                ellipsis: true
            },
            {
                title: '产品经理',
                dataIndex: 'productName',
                align: 'left',
                ellipsis: true
            },
            {
                title: '计划完成时间',
                dataIndex: 'endTime',
                align: 'left',
                ellipsis: true,
                width: 205
            },
            {
                title: '投入工时',
                dataIndex: 'workHoursInput',
                align: 'center',
                ellipsis: true
            }
        ],
        noTargetData: {}
    })
    function getScoreReason(id) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/emgf/goal/${id}`).then(data => {
            reasonState.isSelfData = data.data.unRelatedTaskList
            reasonState.otherData = data.data.unFinishTaskList
            reasonState.totalDeductFraction = data.data.totalDeductFraction
            reasonState.correctFraction = data.data.correctFraction
            reasonState.visible = true
        })
    }
    function getClass(score) {
        let baseClass = 'collapse-weight-font'
        let additionalClass = ''

        if (score < 100) {
            additionalClass = 'warn-score'
        } else if (score === 100) {
            additionalClass = 'normal-score'
        } else if (score > 100) {
            additionalClass = 'good-score'
        }

        return [baseClass, additionalClass]
    }
    function isCurrentMonth() {
        return dayjs(detailState.detailDate).isSame(dayjs(), 'month')
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .jx-detail {
        height: 100%;
        min-height: 800px;
        overflow: auto;
    }

    .left-tree {
        padding: 16px 24px;
    }

    .tree-title {
        display: inline-block;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .right-div {
        padding: 20px 24px;
    }

    .right-title {
        display: inline-block;
        font-size: 18px;
        color: #3875ff;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .row-size {
        height: 32px;
        margin-bottom: 12px;
    }

    .ant-btn-primary {
        color: #3875ff;
        border-color: #3875ff;
    }

    .yg-table :deep(.@{ant-prefix}-table-thead) > tr {
        height: 40px;
    }

    .yg-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #ffffff;
        border-bottom: 1px solid #3875ff;
        padding: 8px 16px;
    }
    .yg-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }
    .export-title {
        width: 532px;
        height: 61px;
        background: rgba(56, 117, 255, 0.1);
        padding: 8px 16px;
        font-size: 14px;
        color: #262626;
        text-align: justify;
        line-height: 22px;
        font-weight: 400;
        display: flex;
        margin-bottom: 12px;
    }

    .export-content {
        display: inline-block;
        margin-left: 8px;
    }

    /*绩效详情*/
    .detail-top {
        height: 64px;
        border-radius: 2px;
        background-color: #fff;
        padding: 19px 24px;
        display: flex;
        margin-bottom: 16px;
    }

    .detail-title {
        font-size: 18px;
        color: #262626;
        font-weight: 600;
    }

    .detail-msg {
        background: #ffffff;
        border-radius: 2px;
        height: 150px;
        padding: 16px 24px;
        display: flex;
    }

    .detail-name {
        display: flex;
        flex-direction: column;
        margin-left: 24px;
    }

    .avatar {
        margin: 9px 0;
        width: 60px;
    }

    .people-name {
        min-height: 50%;
        font-size: 24px;
        color: #1d2129;
        letter-spacing: 0;
        font-weight: 600;
        margin-right: 11px;
    }

    .department-title {
        font-size: 14px;
        color: #1d2129;
        letter-spacing: 0;
        font-weight: 600;
    }

    .normal-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
        margin-right: 8px;
    }

    .weight-font {
        font-size: 20px;
        color: #262626;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }

    .color-font {
        color: #3875ff;
    }

    .other {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .other-top,
    .other-bottom {
        height: 50%;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
        display: flex;
    }

    .other-bottom span {
        bottom: 0;
    }

    .other-bottom-item,
    .other-top-item {
        flex: 1;
    }

    .unit-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }

    .end-font {
        font-size: 20px;
        color: #6f6f6f;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }


    .expand {
        width: 30px;
        font-size: 14px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 400;
        margin-right: 30px;
        line-height: 40px;
    }

    /*
default-div平台、市场、交付-通用项目
*/
    .default-div,
    .template-div,
    .record-div,
    .correct-div,
    .action-div {
        margin-top: 16px;
        background: #ffffff;
        border-radius: 2px;
    }

    .record-div {
    }

    .correct-div {
    }

    .default-title,
    .template-title,
    .record-title,
    .correct-title,
    .action-title {
        padding: 13px 24px;
        background-image: linear-gradient(270deg, rgba(105, 173, 255, 0) 0%, rgba(56, 117, 255, 0.15) 100%);
        border-radius: 2px 2px 0 0;
        height: 48px;
        display: flex;
        line-height: 24px;
    }

    .default-content,
    .template-content {
        padding: 16px 24px;
    }

    .default-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442777026263121920.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .template-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442804996583325696.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .record-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442808794796130304.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .correct-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442809384378957824.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .action-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442835960772558848.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .title-type {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 600;
        margin-right: 12px;
    }

    .title-workHour {
        margin-right: 16px;
    }

    .title-line {
        height: 14px;
        width: 1px;
        background-color: #595959;
        margin-right: 12px;
        margin-top: 6px;
    }

    .title-weight-font {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .title-normal-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }

    .title-score {
        margin-right: 16px;
    }

    /*default-div平台、市场、交付-通用项目*/
    .content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 1.3fr repeat(6, 1fr);
        /* 根据需要调整列数 */
    }

    .collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 1.3fr repeat(6, 1fr);
        /* 根据需要调整列数 */
    }

    .collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .collapse-title div:nth-child(n + 2),
    .content-title div:nth-child(n + 2) {
        margin-right: 25px;
    }

    .collapse-title div:last-child {
        margin-right: 35px;
    }

    .content-title div:last-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-right: 35px;
    }

    .content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }


    :deep(.ant3-collapse-header) {
      padding: 0 !important;
      border: none !important;
    }

    :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
      padding: 0 !important;
    }

    :deep(.ant3-collapse-item) {
      margin-bottom: 8px;
    }

    :deep(.ant3-collapse-icon-position-right > .ant3-collapse-item > .ant3-collapse-header) {
      border-radius: 4px;
      color: #3875ff;
      border-color: #3875ff !important;
    }
    :deep(.ant3-collapse-borderless > .ant3-collapse-item) {
        border: none;
    }

    :deep(.ant3-collapse-content-box) {
        background-color: #fff !important;
    }

    .collapse-weight-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .too-long,
    .template-too-long,
    .action-too-long {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        width: 210px;
    }

    .template-too-long {
        width: 300px;
    }

    .action-too-long {
        width: 250px;
    }

    .default-table {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f7f7f7;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr:not(:last-child)
        > th {
        border-bottom: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th {
        border-right: 1px solid #d9d9d9;
    }

    /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
    .default-table :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
        border-left: none;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th[colstart='0']:first-child {
        border-left: 1px solid #d9d9d9;
    }

    /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-header
        table {
        border-top: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        > .@{ant-prefix}-table-content
        > table {
        border-top: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table-thead)
        > tr
        > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
            .@{ant-prefix}-table-row-expand-icon-cell
        ):not([colspan])::before {
        background: #d9d9d9;
        width: 1px;
    }

    /*表格*/
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-tbody
        tr
        > td {
        border-right: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-tbody
        tr
        > td:first-child {
        border-left: 1px solid #d9d9d9;
    }

    /*行动项任务*/
    /*default-div平台、市场、交付-通用项目*/
    .action-content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 1.3fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .action-collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 1.3fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .action-collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .action-collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .action-content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .action-content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    /*模板任务*/
    /*default-div平台、市场、交付-通用项目*/
    .template-content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 2.1fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .template-collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 2.1fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .template-collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .template-collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 48px;
    }

    .template-content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 48px;
    }

    .template-content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }
    .green-num,
    .red-num,
    .default-num {
        width: 50px;
        height: 20px;
        border-radius: 2px;
        line-height: 20px;
        margin: 0 auto;
    }
    .green-num {
        background: rgba(82, 196, 26, 0.1);
        border: 1px solid #52c41a;
        color: #52c41a;
    }
    .red-num {
        background: rgba(245, 34, 45, 0.1);
        border: 1px solid #f5222d;
        color: #f5222d;
    }
    .default-num {
        background: rgba(38, 38, 38, 0.1);
        border: 1px solid #bfbfbf;
        color: #262626;
    }
    :deep(.table-striped) td {
        background-color: #f8fafc;
    }
    .blue-font {
        color: #3875ff;
    }
    .red-font {
        color: #f5222d;
    }
    .green-font {
        color: #52c41a;
    }
    .no-template-title-img {
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }
    .warn-score {
        color: red;
    }
    .good-score {
        color: #52c41a;
    }
    .normal-score {
        pointer-events: none; /* 禁止所有的鼠标和指针事件 */
        cursor: not-allowed; /* 鼠标指针显示为不允许的样式 */
    }
    .detail-top-title {
        display: flex;
        height: 30px;
        border-bottom: 1px solid #9bbaff;
    }
    .detail-first {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #262626;
        font-weight: 400;
    }
    .red-weight {
        font-size: 18px;
        color: #f5222d;
        font-weight: 600;
        margin-right: 24px;
    }
    .detail-second {
        font-size: 16px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .litter {
        font-size: 16px;
    }
    .detail-item {
        border-left: 4px solid #3875ff;
        padding-left: 8px;
        margin-top: 15px;
        height: 16px;
        line-height: 16px;
        margin-bottom: 12px;
    }
    .no-title-img {
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }
    .title-tip {
        font-size: 14px;
        color: #1d2129;
        letter-spacing: 0;
    }
    .user-img {
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        top: 5px;
        cursor: pointer;
    }
    .other-bottom {
        position: relative;
        top: 10px;
    }
    .other-middle {
        height: 40px;
        background-color: #fef4d9;
        line-height: 40px;
        padding-left: 16px;
        color: #262626;
    }
    .short {
        height: 110px;
    }
</style>
